<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title></title>
		<script type="text/javascript" src="../js/vue.js">
		</script>
	</head>
	<body>
		<div id="app">
			<!-- {{msg}}    修改的msg没有影响到这个msg的值  原先是什么现在就是什么 --> 
			<com :parentmsg='msg' ></com>
		</div>
		<script>
			new Vue({
				el: '#app',
				data: {
					msg:'这是父组件上的data的msg111'
				},
				methods: {},
				// 需要父组件上的值时  需要属性绑定 创建一个属性='父组件的属性值' 然后要在props中 类似写一个注册的动作 props需要的是一个数组[]
				// 在props中声明的属性 只读 可以修改 对父组件相同的值没有影响 会报错 难看
				components:{
					com:{
						template:'<h1 style="color: #FF69B4;">组件传值<br>{{parentmsg}}<br>{{msg}}</h1>',//@click="click"  事件写在此处不能写在 com这个标签上
						props:['parentmsg'],
						data(){
							return {msg:'这是子组件的msg'}
						},
						methods:{
							// click(){
							// 	this.parentmsg='修改了parentmsg'
							// }
						}
						
					}
				}

			})
		</script>
	</body>
</html>
